import React, { Component } from 'react'
import {NavBar, List, Button, Toast} from 'antd-mobile';
import './index.less';
import axios from 'axios';

export default class UserCenter extends Component {
    state = {
        info: {}
    }
    render() {
        return (
            <div className="center-container">
                {/* 顶部导航 start */}
                <NavBar back={null}>个人中心</NavBar>
                {/* 顶部导航 end */}

                {/* 头像部分 start */}
                <div className="profile">
                    <img src={this.state.info.avatar} alt="" />
                    <p>欢迎, 用户 {this.state.info.username}</p>

                    <p>个人信息</p>
                </div>
                {/* 头像部分 end */}

                {/* 个人信息展示 start */}
                <div className="userinfo">
                <List>
                    <List.Item><span>昵称</span><span>{this.state.info.nickName}</span></List.Item>
                    <List.Item><span>手机</span><span>{this.state.info.phone}</span></List.Item>
                </List>
                </div>
                {/* 个人信息展示 end */}
                <div className="h-20"></div>
                <div className="h-20"></div>
                <div className="h-20"></div>
                <Button block  size="large" color="danger" onClick={this.logout}>退出登录</Button>
            </div>
        )
    }

    //生命周期
    async componentDidMount(){
        let result = await axios.post('/login/verify');
        
        this.setState({
            info: result.data.data
        })
    }

    //退出登录
    logout = async () => {
        let result = await axios.post('/logout');

        if(result.data.code === 20000){
            Toast.show({
                icon: "success",
                content: "退出成功",
            });

            this.props.history.push('/login');
        }
    }
}
